<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="login-title">
        <h2>BECE·后台管理</h2>
        <el-tag class="version">1.0</el-tag>
      </div>
      <el-form class="login-form" ref="formRef" :model="formData" :rules="formRules" size="large"
               @submit.native.prevent @keyup.enter.native="handleLogin">
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input v-model="formData.account" placeholder="用户名">
            <template #prefix>
              <el-icon class="el-input__icon"><User/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="formData.password" type="password" placeholder="密码" show-password>
            <template #prefix>
              <el-icon class="el-input__icon"><Lock/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="captcha">
          <el-input v-model="formData.captcha" placeholder="验证码">
            <template #prefix>
              <el-icon class="el-input__icon"><Picture/></el-icon>
            </template>
            <template #suffix>
              <el-image class="captcha-image" :src="captchaBase64" @click="getCaptcha" title="点击更换"/>
            </template>
          </el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-button :loading="loading" type="primary" @click.prevent="handleLogin" style="width:100%;">登录</el-button>
        <!-- 账号密码提示 -->
<!--        <div class="login-tips">
          <span>用户名: admin</span>
          <span>密码: 123456</span>
        </div>-->
      </el-form>
    </el-card>
    <!-- ICP备案 -->
    <div class="login-footer">
      <p>Copyright © 2024 - 2025 BECE All Rights Reserved.</p>
      <p>桂ICP备88888888号-8</p>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import router from '@/router'
import store from '@/store';
import request from '@/utils/request'
import {setToken} from '@/utils/auth'

const loading = ref(false)
const formRef = ref()
const formData = ref({
  account: undefined,
  password: undefined,
  captchaKey: undefined,
  captcha: undefined
})
const formRules = ref({
  account: [{required: true, message: '请输入账号'}],
  password: [{required: true, message: '请输入密码'}],
  captcha: [{required: true, message: '请输入验证码'}]
})

const handleLogin = () => {
  formRef.value.validate(valid => {
    if (!valid) {
      ElMessage.error('请正确填写参数')
      return
    }
    loading.value = true
    request.post('/api/login', formData.value)
        .then(res => {
          ElMessage.success('登录成功')
          setToken(res.data.token)
          store.commit('setPerms', res.data.perms)
          store.commit('setNick', res.data.nickname)
          store.commit('setAvatar', res.data.avatar)
          let redirect = router.currentRoute.value.query?.redirect
          router.push({path: redirect || '/'})
        })
        .catch(() => {
          getCaptcha()
          loading.value = false
        })
  })
}

// 验证码
const captchaBase64 = ref(undefined)
const getCaptcha = () => {
  let r = Math.random()
  request.get(`/api/captcha?r=${r}`).then(res => {
    formData.value.captchaKey = res.data.captchaKey
    captchaBase64.value = res.data.captchaBase64
  })
}
getCaptcha()

</script>

<style>
.login-card .login-form .el-input__wrapper {
  height: 48px;
  background-color: transparent;
}
</style>

<style scoped>
.login-container {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: url('@/assets/images/bg_login.jpg') no-repeat center right;
}

.login-card {
  width: 25rem;
  border-style: none;
  border-radius: 4%;
  background-color: transparent;
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);
}

.login-title {
  position: relative;
  text-align: center;
}

.login-title .version {
  position: absolute;
  top: 0;
  right: 0;
}

.login-form {
  padding: 30px 10px;
}

.captcha-image {
  height: 40px;
  margin-right: -10px;
  border-radius: 4px;
  cursor: pointer;
}

.login-tips {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.login-tips span + span {
  margin-left: 1rem;
}

.login-footer {
  position: absolute;
  bottom: 0.25rem;
  font-size: 10px;
  text-align: center;
  color: #888;
}

@media (max-width: 991px) {
  .login-footer {
    display: none;
  }
}
</style>
